import React, { Component } from 'react';
import service from '../../api'
import '../../styles/Cate.scss'
import { NavBar } from 'antd-mobile'
import { SideBar } from 'antd-mobile'
class Cate extends Component {
    constructor(props) {
        super(props)
        this.state = {
            leftlist: [],
            erjilist: [],
            currentIndex: 0,
            category: '',
            brand: '',
            sanjilist: []

        }
    }
    back() {
        this.props.history.go(-1)
    }
    //一级列表
    async componentDidMount() {
        var res = await service.pro.pro_categorylist()
        this.setState({ leftlist: res.data.data })
        let res1 = await service.pro.pro_categorybrandlist({ category: '手机' })
        this.setState({ erjilist: res1.data.data })
        this.setState({ category: this.state.leftlist[0] })

    }
    // 二级列表
    async handleIndex(item, index) {
        this.setState({ currentIndex: index})
        this.setState({ category: item })
        let res = await service.pro.pro_categorybrandlist({ category: item })
        // console.log(res.data.data);
        this.setState({ erjilist: res.data.data })       
    }
    // 首次季进入，默认呈现第一个品牌下的分类，在点击之后进行赋值，才可以进行发请求，获取数据
    // 三级列表
    async sanji(brand) {
        var res2 =await service.pro.pro_categorybrandprolist({ brand: brand, category: this.state.category})
        this.setState({ sanjilist: res2.data.data })
    }
    render() {
        return (
            <div className='cate'>
                <div className="fanhui">
                    <NavBar onBack={()=>{this.back()}}>商品分类</NavBar>
                </div>
                <div className="box">
                    <div className="left">
                        {
                            this.state.leftlist.map((item, index) => {
                                return (
                                    <div className={'fenlei ' + (this.state.currentIndex == index ? 'active' : '')} onClick={() => { this.handleIndex(item, index) }} key={index} >
                                        <div className="name">{item}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="right">
                        <div className="shop">
                            {
                                this.state.erjilist.map((item, index) => {
                                    return (
                                        <div className="erji" key={index}>
                                            <span className='brand' onClick={() => { this.sanji(item.brand) }}>{item.brand}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="pinpai">
                            {
                                this.state.sanjilist.map((item,index)=>{
                                    return (
                                        <div className="brand" key={index}>
                                            <div className="img-box">
                                                <img src={item.img2} alt="" />
                                            </div>
                                            <div className="tatx">
                                                <div className="price">{item.originprice}</div>
                                                <div className="name">{item.proname}</div>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Cate;